<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图像内容理解 - 多模态检索系统</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        /* 功能特点展示样式 */
        .search-features {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .feature-card {
            background: #f8fafc;
            padding: 20px;
            border-radius: 12px;
            border: 1px solid #e2e8f0;
            transition: all 0.3s;
        }

        .feature-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        }

        .feature-card i {
            font-size: 24px;
            color: #4299e1;
            margin-bottom: 12px;
        }

        .feature-card h3 {
            font-size: 18px;
            color: #2d3748;
            margin-bottom: 8px;
        }

        .feature-card p {
            color: #718096;
            font-size: 14px;
            line-height: 1.6;
        }

        /* 支持的功能列表样式 */
        .supported-features {
            background: #f8fafc;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 24px;
        }

        .features-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 16px;
        }

        .feature-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px;
            border-radius: 8px;
            transition: all 0.3s;
        }

        .feature-item i {
            color: #4299e1;
            font-size: 18px;
        }

        .feature-item span {
            color: #4a5568;
            font-size: 14px;
        }

        /* 上传区域美化 */
        .image-upload {
            border: 2px dashed #e2e8f0;
            background: #f8fafc;
            transition: all 0.3s;
        }

        .image-upload:hover {
            border-color: #4299e1;
            background: #ebf8ff;
        }

        .upload-icon {
            font-size: 48px;
            color: #4299e1;
            margin-bottom: 16px;
        }
    </style>
</head>
<body>
    <div class="layout">
        <!-- 侧边栏导航 -->
        <div class="sidebar">
            <div class="logo">
                <span>多模态检索系统</span>
            </div>
            <nav class="nav-menu">
                <a href="text-search.html" class="nav-item" data-type="text">文本检索</a>
                <a href="audio-search.html" class="nav-item" data-type="audio">语音检索</a>
                <a href="image-search.html" class="nav-item active" data-type="image">图像内容理解</a>
                <a href="image-retrieval.html" class="nav-item" data-type="image-retrieval">图像检索</a>
                <a href="video-search.html" class="nav-item" data-type="video">视频检索</a>
            </nav>
        </div>

        <!-- 主要内容区 -->
        <div class="main-content">
            <div class="search-section">
                <h2><i class="fas fa-image"></i> 图像内容理解</h2>

                <!-- 添加功能特点展示 -->
                <div class="search-features">
                    <div class="feature-card">
                        <i class="fas fa-brain"></i>
                        <h3>深度理解</h3>
                        <p>基于深度学习的图像理解，准确识别图像内容和场景</p>
                    </div>
                    <div class="feature-card">
                        <i class="fas fa-layer-group"></i>
                        <h3>多层分析</h3>
                        <p>从对象、场景到语义的多层次内容分析</p>
                    </div>
                    <div class="feature-card">
                        <i class="fas fa-chart-line"></i>
                        <h3>高精度识别</h3>
                        <p>先进的视觉算法，提供精准的内容理解结果</p>
                    </div>
                </div>

                <!-- 支持的功能列表 -->
                <div class="supported-features">
                    <div class="features-list">
                        <div class="feature-item">
                            <i class="fas fa-eye"></i>
                            <span>物体识别</span>
                        </div>
                        <div class="feature-item">
                            <i class="fas fa-palette"></i>
                            <span>场景分析</span>
                        </div>
                        <div class="feature-item">
                            <i class="fas fa-tags"></i>
                            <span>标签生成</span>
                        </div>
                        <div class="feature-item">
                            <i class="fas fa-align-left"></i>
                            <span>文本描述</span>
                        </div>
                    </div>
                </div>

                <div class="image-search-container">
                    <!-- 图像上传区域 -->
                    <div class="image-input-section">
                        <div class="image-upload">
                            <input type="file" id="image-file" accept="image/*">
                            <label for="image-file">
                                <i class="fas fa-cloud-upload-alt upload-icon"></i>
                                <span>点击上传图片或拖拽至此</span>
                                <p class="upload-hint">支持 JPG、PNG、JPEG 等常见图片格式</p>
                            </label>
                        </div>

                        <!-- 图片预览 -->
                        <div class="image-preview" style="display: none;">
                            <img id="preview" src="" alt="预览图片">
                        </div>

                        <!-- 理解按钮 -->
                        <div class="analyze-actions">
                            <button class="analyze-btn" disabled>
                                <i class="fas fa-brain"></i>
                                开始检索理解图像内容
                            </button>
                        </div>
                    </div>

                    <!-- 分析结果显示 -->
                    <div class="analysis-result" style="display: none;">
                        <h3>图像理解结果</h3>
                        <div class="result-cards">
                            <!-- 结果卡片将通过JavaScript动态添加 -->
                        </div>
                        <style>
                            .analysis-result {
                                margin-top: 30px;
                                padding: 20px;
                                background: #fff;
                                border-radius: 12px;
                                box-shadow: 0 2px 8px rgba(0,0,0,0.1);
                            }
                            .recognition-card {
                                margin-top: 20px;
                            }
                            .recognition-card .card-content {
                                padding: 20px;
                                background: #f8f9fa;
                                border-radius: 8px;
                            }
                            .recognition-card p {
                                font-size: 16px;
                                line-height: 1.6;
                                color: #333;
                                margin: 0;
                            }
                        </style>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="image-search.js"></script>
</body>
</html>
